<div id="log-event-viewer" phx-update="ignore">
  <ul class="list-group list-group-horizontal">
    <li class="list-group-item flex-fill">
      <div>
        <h6 class="header-margin">Timestamp</h6>
        <div>{Timex.to_datetime(@timestamp)}</div>
        <div class="tw-text-xs">
          <.link href="#" phx-click={Phoenix.LiveView.JS.dispatch("logflare:copy-to-clipboard", detail: %{text: Timex.to_datetime(@timestamp)})} data-toggle="tooltip" data-placement="top" title="Copy to clipboard">
            copy
          </.link>
          <%= if @local_timezone do %>
            {link("inspect",
              class: "tw-ml-4",
              to:
                Routes.live_path(LogflareWeb.Endpoint, LogflareWeb.Source.SearchLV, @source,
                  querystring: "t:>#{Timex.format!(Timex.shift(@local_timestamp, seconds: -30), "{YYYY}-{0M}-{0D}T{h24}:{m}:{s}")} t:<#{Timex.format!(Timex.shift(@local_timestamp, seconds: 30), "{YYYY}-{0M}-{0D}T{h24}:{m}:{s}")} c:count(*) c:group_by(t::second)",
                  tailing?: false
                )
            )}
          <% else %>
            <br />
          <% end %>
        </div>
      </div>
    </li>
    <li class="list-group-item flex-fill">
      <h6 class="header-margin">UUID</h6>

      <div>{@id}</div>
      <div class="tw-text-xs">
        <.link href="#" phx-click={Phoenix.LiveView.JS.dispatch("logflare:copy-to-clipboard", detail: %{text: @id})} data-toggle="tooltip" data-placement="top" title="Copy to clipboard">
          copy
        </.link>
        <.log_event_permalink log_event_id={@id} timestamp={@body["timestamp"]} source={@source} lql={@lql} class="" />
      </div>
    </li>
  </ul>
  <ul class="list-group">
    <li class="list-group-item flex-fill tw-whitespace-pre-line">
      <h6 class="header-margin">Message</h6>
      {@message}
    </li>
  </ul>
  <ul class="list-group" id="log-event-metadata">
    <li class="list-group-item">
      <ul class="nav d-flex" id="metadata-nav" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" id="metadata-viewer-link" data-toggle="tab" href="#metadata-viewer" role="tab">
            Event Body
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#metadata-raw" role="tab">Raw JSON</a>
        </li>
        <li class="nav-item ml-auto">
          <a class="nav-link fas-copy" href="#" phx-click={Phoenix.LiveView.JS.dispatch("logflare:copy-to-clipboard", detail: %{text: @fmt_body})}>
            <span class="pointer-cursor logflare-tooltip" data-trigger="hover focus" data-delay="0" data-toggle="tooltip" data-placement="top" data-title="Click to copy">
              <i class="fas fa-copy"></i>
            </span>
          </a>
        </li>
      </ul>
      <ul class="list-group list-group-horizontal" id="metadata-viewer-tabs">
        <div class="tab-content">
          <div class="tab-pane active" id="metadata-viewer" role="tabpanel" style="font-size: 14px;">
            <pre class="blurred"><code><%= String.replace(@fmt_body, ~r/[\{\}]/, "") %></code></pre>
          </div>
          <div class="tab-pane" id="metadata-raw" role="tabpanel">
            <pre id="metadata-raw-json" class="pre-metadata" phx-hook="MetadataJsonViewer"><code id="metadata-raw-json-code"><%= @fmt_body %></code></pre>
          </div>
        </div>
      </ul>
    </li>
  </ul>
</div>
